import req from "../../utils/req";

Page({
  /**
   * 页面的初始数据
   */
  data: {
    banners: [], // 轮播图图片列表
    recommendList: [], // 热门推荐列表
    topList: [], // 热歌推荐列表
  },

  recommendDay() {
    wx.navigateTo({
      url: "/pages/recommendSong/recommendSong",
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    /* 
      1.在哪发？
        onLoad是最早的生命周期，就在这里发送请求
      2.怎么发？
        小程序中没有window，全局对象是wx
        在小程序中使用wx.request发送请求
      3.往哪发？
        请求三要素：请求地址+请求方式+请求参数
    */
    // wx.request({
    //   url: "http://localhost:3000/banner",
    //   data: {
    //     type: 2,
    //   },
    //   method: "GET",
    // });

    // const result = await req("/banner", { type: 2 });
    // // console.log(result)
    // const { banners } = result;
    // this.setData({
    //   banners,
    // });

    // 请求轮播图数据
    req("/banner", { type: 2 }).then(({ banners }) => {
      this.setData({
        banners,
      });
    });

    // 请求推荐歌曲列表数据
    req("/personalized").then(({ result: recommendList }) => {
      this.setData({
        recommendList,
      });
    });

    // 请求排行榜数据
    // 发送请求需要请求的id
    const idxArr = [12, 1, 23, 33];
    // 保存数据的数组
    const topList = [];
    let i = 0;
    // 使用while循环发送四个请求
    while (i < idxArr.length) {
      req("/top/list", { idx: idxArr[i++] }).then(({ playlist }) => {
        // console.log(playlist);
        const obj = {};
        obj.name = playlist.name;
        obj.list = playlist.tracks;
        // console.log(obj);
        obj.list = playlist.tracks.slice(0, 3).map((item) => {
          return {
            imgUrl: item.al.picUrl,
            topName: item.al.name,
          };
        });
        topList.push(obj);
        // console.log(obj);
        // 相当于每次请求成功都需要更新一次页面，也就是需要更新四次页面
        this.setData({
          topList,
        });

        // this.setData({
        //   recommendList,
        // });
      });
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
});
